<!--我的待办-->
<template>
    <div id="backlogPanel">
      <div class="contentList" :style="{ height: index == 1 ? '190px' : '112px' }">
        <ul>
          <li v-for="(item1, index1) in listData" :key="index1" @click="contentListClick(item1)">
            <div>
              <img :src="item1.icon" />
              <p style="text-align: center">{{ item1.name }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  export default {
    name: "backlogPanel",
    data(){
      return{
        listData:[
          {
            name:'审批建房',
            icon:'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/1wddb.png'
          },
          {
            name:'危房改造',
            icon:'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/2.png'
          },
          {
            name:'建房服务',
            icon:'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/3.png'
          },
          {
            name:'生产经营',
            icon:'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/4.png'
          }
        ]
      }
    },
    methods:{
      contentListClick(item) {
        switch (item.name) {
          case '审批建房':
            this.$router.push({
              path: '/MyTodoList',
            })
            break
          case '危房改造':
            this.$router.push({
              path: '/renovateDilapidated',
            })
            break
          case '建房服务':
            this.$router.push({
              path: '/BuildingServices',
            })
            break
          case '生产经营':
            this.$router.push({
              path: '/productionManagement',
            })
            break
        }
      }
    },
    mounted() {

    }
  };
</script>

<style scoped lang="scss">
  #backlogPanel{
    padding-top: 30px;
    .contentList {
      height: 100px;
      padding: 10px 0;
      margin-bottom: 10px;
    }

    .contentList ul li {
      width: 25%;
      float: left;
      font-size: 16px;
      text-align: center;
      position: relative;

      // margin-bottom: 10px;
      .angle-mark {
        width: 20px;
        height: 20px;
        background: #ff0000;
        border-radius: 50%;
        display: inline-block;
        line-height: 20px;
        text-align: center;
        position: absolute;
        right: 0;
        top: -6px;
        color: #ffffff;
      }
    }
  }
</style>
